<template>
    <div v-if="enable">
        <div class="active-button" @click="showDialog" :class="color">
            <i class="el-icon-edit-outline"></i>
        </div>
    </div>
</template>
<script>
    import eventBus from "@/utils/eventBus";
    import {mapState} from "vuex";
    export default {
        name: "SuggestionButton",
        data() {
            return {
                suggestionButtonVisible:false,
            }
        },
        computed:{
          ...mapState(['suggestion']),
          isActive(){
            return this.suggestion.isActive
          },
          enable(){
            return this.suggestion.enable
          },
          color(){
              return this.isActive?"show":"hide"
          },
        },
        created() {
        },
        mounted() {
        },
        watch:{
          isActive(v){
          }
        },
        methods:{
            showDialog(){
              this.$store.dispatch("suggestion/setIsActive",!this.isActive)
            },
        }
    }
</script>
<style lang="scss" scoped>
    .show{
        background-color: var(--theme);
        color: white;
    }
    .hide{
        background-color: #e0e0e0;
        color: #666666;
    }
    .active-button {
        width: 70px;
        height: 70px;
        position: absolute;
        right: 0px;
        bottom: 40px;
        border-top-left-radius: 35px;
        border-bottom-left-radius: 35px;
        i {
            padding-left: 25px;
            padding-top: 20px;
            font-size: 24px;
        }
    }
</style>
